<template>
  <!-- 4. 使用富文本组件 -->
  <el-tiptap :content="value" lang="zh" :extensions="tools" @onUpdate="$emit('input', $event)" />
</template>

<script>
// 1. 导入需要的组件与样式
import { ElementTiptap, Doc, Text, Paragraph, Heading, Bold, Underline, Italic, Image, Strike, ListItem, BulletList, OrderedList, TodoItem, TodoList, HorizontalRule, Fullscreen, Preview, CodeBlock, TextColor } from 'element-tiptap'
import 'element-tiptap/lib/index.css'

export default {
  name: 'Tiptap',
  // 2. 注册组件
  components: {
    'el-tiptap': ElementTiptap
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 3. 创建组件工具栏
      tools: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 3 }),
        new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
        new Image(),
        new Underline(), // 下划线
        new Italic(), // 斜体
        new Strike(), // 删除线
        new HorizontalRule(), // 华丽的分割线
        new ListItem(),
        new BulletList(), // 无序列表
        new OrderedList(), // 有序列表
        new TodoItem(),
        new TodoList(),
        new Fullscreen(),
        new Preview(),
        new CodeBlock(),
        new TextColor()
      ]
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
